<template>
  <div class="Home">
    <div class="top">
      <div class="top-left">
        <el-card style="margin: 5px;">
          <div style="width: 100%;display: flex;">
            <div style="width: 40%; text-align: center;">
              <el-avatar :size="100" :src="avatar">
              </el-avatar>
            </div>
            <div style="width: 60%;padding-left: 20px;">
              <div style="font-size: 25px;font-weight: 700;margin-top: 20px;">{{userName}}</div>
              <!-- <div style="font-size: 15px;font-weight: 200;color: gray;">{{user.role}}</div> -->
            </div>
          </div>
          <el-divider />
          <div class="userinfo">
            <el-row>
              <el-col :span="12">邮箱</el-col>
              <el-col :span="12">{{email}}</el-col>
            </el-row>

            <el-row>
              <el-col :span="12">我的博客</el-col>
              <el-col :span="12">www.cwsrs.cn</el-col>
            </el-row>
          </div>
        </el-card>
        <el-card style="height: 275px;margin:  5px; overflow: auto;">
          <el-row>消息通知</el-row>
          <el-divider />
          <div>
            <div style="text-align: center;line-height:10;">暂时没有通知~</div>
          </div>

        </el-card>
      </div>
      <div class="top-right">
        <el-row :gutter="20" style="width: 100%;margin-top: 6px;">
          <el-col :span="6">
            <el-card shadow="hover" :body-style="{ padding: '0px' }">
              <div class="grid-content grid-con-1">
                <i class="el-icon-user-solid grid-con-icon"></i>
                <div class="grid-cont-right">
                  <div class="grid-num">3</div>
                  <div>班级数量</div>
                </div>
              </div>
            </el-card>
          </el-col>
          <el-col :span="6">
            <el-card shadow="hover" :body-style="{ padding: '0px' }">
              <div class="grid-content grid-con-2">
                <i class="el-icon-message-solid grid-con-icon"></i>
                <div class="grid-cont-right">
                  <div class="grid-num">20</div>
                  <div>辅导员数量</div>
                </div>
              </div>
            </el-card>
          </el-col>
          <el-col :span="6">
            <el-card shadow="hover" :body-style="{ padding: '0px' }">
              <div class="grid-content grid-con-3">
                <i class="el-icon-s-goods grid-con-icon"></i>
                <div class="grid-cont-right">
                  <div class="grid-num">88</div>
                  <div>用户量</div>
                </div>
              </div>
            </el-card>
          </el-col>
          <el-col :span="6">
            <el-card shadow="hover" :body-style="{ padding: '0px' }">
              <div class="grid-content grid-con-4">
                <i class="el-icon-chat-dot-square grid-con-icon"></i>
                <div class="grid-cont-right">
                  <div class="grid-num">236</div>
                  <div>学生人数</div>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>

        <el-row>
          <el-card style="	margin-top: 10px;">
            <div id="mian" ref="reference">

            </div>
          </el-card>
        </el-row>
      </div>

    </div>
    <div class="bottom">
      <div class="box_1"></div>
      <div class="box_2"></div>
      <div class="box_3"></div>
      <div class="bear"></div>
    </div>


  </div>
</template>

<script>
  import {
    mapGetters
  } from 'vuex'
  import * as echarts from 'echarts';
  export default {
    name: 'Home',
    computed: {
      ...mapGetters([
        'name',
        'avatar',
        "info"
      ])
    },
    data() {
      return {
        HomeData: {},
        userVo: {},
        categoryDetailList: {},
        homeTopVo: {},
        xAxisBarListName: [],
        userName: "",
        email: "2411286960@qq.com"
      }
    },
    mounted() {
      this.Reference()

      if (this.info != undefined) {
        this.userName = this.info.stuName
        this.email = this.info.stuEmail
      } else {
        this.userName = this.name
      }
    },
    methods: {
      format(percentage) {
        return percentage === 1000 ? '满' : `${percentage}%`;
      },
      async getData() {
        let res = await this.$api.home.getHomeData()
        console.log(res);
        if (res.code == 200) {
          this.userVo = res.data.userVo
          this.categoryDetailList = res.data.category
          this.homeTopVo = res.data.homeTopVo
          this.Reference(res.data.articleNameList.splice(0, 6), res.data.viewCount.splice(0, 6))
        }
      },
      // 条形图
      Reference(names = [], counts = []) {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(this.$refs.reference);
        // 绘制图表
        myChart.setOption({
          title: {
            text: '用户活跃量'
          },
          label: {
            show: true,
            position: 'top',
          },
          tooltip: {},
          xAxis: {
            data: ['admin', '陈', '龙', '陈8', '日志管理员', '杨小小'],
            // data: names,
            // axisLabel: { interval:0, rotate:2 }
          },
          yAxis: {},
          series: [{
            name: '活跃量',
            type: 'bar',
            data: [88, 25, 30, 5, 10, 66]
          }],
          axisLabel: {
            interval: 0,
            formatter: function (params) {
              var newParamsName = ''
              const paramsNameNumber = params.length
              const provideNumber = 11 // 单行显示文字个数
              const rowNumber = Math.ceil(paramsNameNumber / provideNumber)
              if (paramsNameNumber > provideNumber) {
                for (let p = 0; p < rowNumber; p++) {
                  var tempStr = ''
                  var start = p * provideNumber
                  var end = start + provideNumber
                  if (p === rowNumber - 1) {
                    tempStr = params.substring(start, paramsNameNumber)
                  } else {
                    tempStr = params.substring(start, end) + '\n'
                  }
                  newParamsName += tempStr
                }
              } else {
                newParamsName = params
              }
              return newParamsName
            }
          }
        });
      }

    }

  }
</script>

<style lang="scss" scoped>
  #mian {
    width: 100%;
    height: 376px;

  }

  .Home {
    height: 800px;
    width: 100%;

    // display: flex;
    .top {
      z-index: 10;
      width: 100%;
      height: 70%;
      // background-color: red;
      display: flex;

      .top-left {
        height: 100%;
        width: 28%;

        // background-color: white;
        // margin: 10px;
        // border: 1px solid black;
        span {
          vertical-align: middle;
        }

        .userinfo .el-row {
          margin: 8px 0;
          color: gray;
        }

        .el-divider--horizontal {
          margin: 15px 0;
        }
      }

      .top-right {
        width: 70%;
        height: 100%;
        // display: flex;

      }
    }

    .bottom {
      width: 100%;
      height: 50%;

      // background-color: aqua;
      .box_1 {
        z-index: 2;
        position: absolute;
        left: 0;
        bottom: 0;
        height: 336px;
        width: 100%;
        background: url('../../assets/image/bg1.png') no-repeat;
        animation: bg 30s linear infinite;
      }

      .box_2 {
        position: absolute;
        left: 0;
        bottom: 0;
        height: 569px;
        width: 100%;
        background: url('../../assets/image/bg2.png') no-repeat;
        opacity: 0.1;
        animation: bg 30s linear infinite;
      }

      .box_3 {
        z-index: 1;
        position: absolute;
        left: 0;
        bottom: 0;
        height: 384px;
        width: 100%;
        background: url('../../assets/image/bg3.png') no-repeat;
        opacity: 0.5;
        animation: bg 30s linear infinite;
      }

      .bear {
        z-index: 3;
        position: absolute;
        left: 0;
        bottom: 0;
        height: 100px;
        width: 200px;
        background: url('../../assets/image/bear.png') no-repeat;
        animation: bear 0.5s steps(8) infinite, move 6s forwards 0.2s;
      }

      @keyframes bear {
        from {
          background-position: 0, 0;
        }

        to {
          background-position: -1600px, 0;
        }
      }

      @keyframes move {
        from {
          left: 0;
        }

        to {
          left: 50%;
          transform: translateX(-50%);
        }
      }

      @keyframes bg {
        from {
          background-position: 0, 0;
        }

        to {
          background-position: -1200px, 0;
        }
      }

    }



    .grid-content {
      display: flex;
      align-items: center;
      height: 100px;
    }

    .grid-cont-right {
      flex: 1;
      text-align: center;
      font-size: 14px;
      color: #999;
    }

    .grid-num {
      font-size: 30px;
      font-weight: bold;
    }

    .grid-con-icon {
      font-size: 50px;
      width: 100px;
      height: 100px;
      text-align: center;
      line-height: 100px;
      color: #fff;
    }

    .grid-con-1 .grid-con-icon {
      background: rgb(45, 140, 240);
    }

    .grid-con-1 .grid-num {
      color: rgb(45, 140, 240);
    }

    .grid-con-2 .grid-con-icon {
      background: rgb(100, 213, 114);
    }

    .grid-con-2 .grid-num {
      color: rgb(45, 140, 240);
    }

    .grid-con-3 .grid-con-icon {
      background: rgb(242, 94, 67);
    }

    .grid-con-3 .grid-num {
      color: rgb(242, 94, 67);
    }


    .grid-con-4 .grid-con-icon {
      background: rgb(80, 242, 237);
    }

    .grid-con-4 .grid-num {
      color: rgb(80, 242, 237);
    }

  }
</style>